"use client"

import { useState } from "react"
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    ScrollView,
    Platform,
    TextInput,
    Alert,
    KeyboardAvoidingView,
} from "react-native"
import { SafeAreaView } from "react-native-safe-area-context"
import { LinearGradient } from "expo-linear-gradient"
import { ChevronLeft, MessageCircle, Mail, Phone, MapPin, Send, Clock, HelpCircle } from "lucide-react-native"
import { theme } from "@/constants/theme"
import { useRouter } from "expo-router"
import Animated, { FadeInDown } from "react-native-reanimated"

export default function ContactUsScreen() {
    const router = useRouter()
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [message, setMessage] = useState("")
    const [errors, setErrors] = useState<{ name?: string; email?: string; message?: string }>({})

    const validateForm = () => {
        const newErrors: { name?: string; email?: string; message?: string } = {}

        if (!name.trim()) {
            newErrors.name = "请输入您的姓名"
        }

        if (!email.trim()) {
            newErrors.email = "请输入您的邮箱"
        } else if (!/\S+@\S+\.\S+/.test(email)) {
            newErrors.email = "请输入有效的邮箱地址"
        }

        if (!message.trim()) {
            newErrors.message = "请输入您的留言"
        }

        setErrors(newErrors)
        return Object.keys(newErrors).length === 0
    }

    const handleSubmit = () => {
        if (validateForm()) {
            // 模拟提交成功
            Alert.alert("提交成功", "感谢您的留言，我们会尽快回复您！", [
                {
                    text: "确定",
                    onPress: () => {
                        setName("")
                        setEmail("")
                        setMessage("")
                    },
                },
            ])
        }
    }

    return (
        <SafeAreaView style={styles.container} edges={["top"]}>
            <LinearGradient
                colors={theme.colors.neutral.backgroundGradient}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                style={styles.gradientBackground}
            >
                {/* 头部 */}
                <View style={styles.header}>
                    <TouchableOpacity style={styles.backButton} onPress={() => router.back()}>
                        <ChevronLeft size={24} color={theme.colors.neutral.black} />
                    </TouchableOpacity>
                    <Text style={styles.headerTitle}>联系我们</Text>
                    <View style={styles.headerRight} />
                </View>

                <KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} style={{ flex: 1 }}>
                    <ScrollView style={styles.scrollView} showsVerticalScrollIndicator={false}>
                        {/* 顶部图标 */}
                        {/* <Animated.View style={styles.iconContainer} entering={FadeInDown.delay(100).springify()}>
                            <View style={styles.iconBackground}>
                                <MessageCircle size={40} color={theme.colors.primary.default} />
                            </View>
                        </Animated.View> */}

                        {/* 联系方式卡片 */}
                        <Animated.View style={styles.contactCard} entering={FadeInDown.delay(200).springify()}>
                            <Text style={styles.contactTitle}>联系方式</Text>

                            <View style={styles.contactItem}>
                                <View style={[styles.contactIcon, { backgroundColor: "#E3F2FD" }]}>
                                    <Mail size={20} color={theme.colors.primary.default} />
                                </View>
                                <View style={styles.contactInfo}>
                                    <Text style={styles.contactLabel}>电子邮件</Text>
                                    <Text style={styles.contactValue}>support@kidsenglish.com</Text>
                                </View>
                            </View>

                            <View style={styles.contactItem}>
                                <View style={[styles.contactIcon, { backgroundColor: theme.colors.secondary.green.light }]}>
                                    <Phone size={20} color={theme.colors.secondary.green.default} />
                                </View>
                                <View style={styles.contactInfo}>
                                    <Text style={styles.contactLabel}>客服热线</Text>
                                    <Text style={styles.contactValue}>400-123-4567</Text>
                                </View>
                            </View>

                            <View style={styles.contactItem}>
                                <View style={[styles.contactIcon, { backgroundColor: theme.colors.secondary.orange.light }]}>
                                    <Clock size={20} color={theme.colors.secondary.orange.default} />
                                </View>
                                <View style={styles.contactInfo}>
                                    <Text style={styles.contactLabel}>服务时间</Text>
                                    <Text style={styles.contactValue}>周一至周五 9:00-18:00</Text>
                                </View>
                            </View>

                            <View style={styles.contactItem}>
                                <View style={[styles.contactIcon, { backgroundColor: theme.colors.primary.purpleLight }]}>
                                    <MapPin size={20} color={theme.colors.primary.purple} />
                                </View>
                                <View style={styles.contactInfo}>
                                    <Text style={styles.contactLabel}>公司地址</Text>
                                    <Text style={styles.contactValue}>北京市海淀区中关村科技园区</Text>
                                </View>
                            </View>
                        </Animated.View>

                        {/* 常见问题 */}
                        {/* <Animated.View style={styles.faqCard} entering={FadeInDown.delay(300).springify()}>
                            <Text style={styles.faqTitle}>常见问题</Text>

                            <TouchableOpacity style={styles.faqItem}>
                                <View style={styles.faqIconContainer}>
                                    <HelpCircle size={16} color={theme.colors.primary.default} />
                                </View>
                                <Text style={styles.faqText}>如何重置密码？</Text>
                            </TouchableOpacity>

                            <TouchableOpacity style={styles.faqItem}>
                                <View style={styles.faqIconContainer}>
                                    <HelpCircle size={16} color={theme.colors.primary.default} />
                                </View>
                                <Text style={styles.faqText}>如何取消会员订阅？</Text>
                            </TouchableOpacity>

                            <TouchableOpacity style={styles.faqItem}>
                                <View style={styles.faqIconContainer}>
                                    <HelpCircle size={16} color={theme.colors.primary.default} />
                                </View>
                                <Text style={styles.faqText}>如何同步学习进度？</Text>
                            </TouchableOpacity>
                        </Animated.View> */}

                        {/* 留言表单 */}
                        <Animated.View style={styles.formCard} entering={FadeInDown.delay(400).springify()}>
                            <Text style={styles.formTitle}>给我们留言</Text>

                            <View style={styles.inputContainer}>
                                <Text style={styles.inputLabel}>您的姓名</Text>
                                <TextInput
                                    style={[styles.input, errors.name ? styles.inputError : null]}
                                    placeholder="请输入您的姓名"
                                    value={name}
                                    onChangeText={(text) => {
                                        setName(text)
                                        if (errors.name) {
                                            setErrors({ ...errors, name: undefined })
                                        }
                                    }}
                                    placeholderTextColor="#AAAAAA"
                                />
                                {errors.name && <Text style={styles.errorText}>{errors.name}</Text>}
                            </View>

                            <View style={styles.inputContainer}>
                                <Text style={styles.inputLabel}>您的邮箱</Text>
                                <TextInput
                                    style={[styles.input, errors.email ? styles.inputError : null]}
                                    placeholder="请输入您的邮箱"
                                    value={email}
                                    onChangeText={(text) => {
                                        setEmail(text)
                                        if (errors.email) {
                                            setErrors({ ...errors, email: undefined })
                                        }
                                    }}
                                    keyboardType="email-address"
                                    autoCapitalize="none"
                                    placeholderTextColor="#AAAAAA"
                                />
                                {errors.email && <Text style={styles.errorText}>{errors.email}</Text>}
                            </View>

                            <View style={styles.inputContainer}>
                                <Text style={styles.inputLabel}>留言内容</Text>
                                <TextInput
                                    style={[styles.textArea, errors.message ? styles.inputError : null]}
                                    placeholder="请输入您的留言内容"
                                    value={message}
                                    onChangeText={(text) => {
                                        setMessage(text)
                                        if (errors.message) {
                                            setErrors({ ...errors, message: undefined })
                                        }
                                    }}
                                    multiline
                                    numberOfLines={4}
                                    textAlignVertical="top"
                                    placeholderTextColor="#AAAAAA"
                                />
                                {errors.message && <Text style={styles.errorText}>{errors.message}</Text>}
                            </View>

                            <TouchableOpacity style={styles.submitButton} onPress={handleSubmit}>
                                <LinearGradient
                                    colors={theme.colors.primary.gradient}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                    style={styles.submitButtonGradient}
                                >
                                    <Send size={18} color="#FFF" style={{ marginRight: 8 }} />
                                    <Text style={styles.submitButtonText}>提交留言</Text>
                                </LinearGradient>
                            </TouchableOpacity>
                        </Animated.View>

                        <View style={{ height: 40 }} />
                    </ScrollView>
                </KeyboardAvoidingView>
            </LinearGradient>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: theme.colors.neutral.background,
    },
    gradientBackground: {
        flex: 1,
    },
    header: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingHorizontal: theme.spacing.lg,
        paddingVertical: theme.spacing.md,
    },
    backButton: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "rgba(255, 255, 255, 0.5)",
    },
    headerTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
    },
    headerRight: {
        width: 40,
    },
    scrollView: {
        flex: 1,
    },
    iconContainer: {
        alignItems: "center",
        marginVertical: theme.spacing.lg,
    },
    iconBackground: {
        width: 80,
        height: 80,
        borderRadius: 40,
        backgroundColor: "#E3F2FD",
        alignItems: "center",
        justifyContent: "center",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(91, 142, 244, 0.3)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.3,
                shadowRadius: 8,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    contactCard: {
        marginHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    contactTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.lg,
        paddingLeft: theme.spacing.xs,
        borderLeftWidth: 4,
        borderLeftColor: theme.colors.primary.default,
    },
    contactItem: {
        flexDirection: "row",
        alignItems: "center",
        marginBottom: theme.spacing.md,
    },
    contactIcon: {
        width: 40,
        height: 40,
        borderRadius: 20,
        alignItems: "center",
        justifyContent: "center",
        marginRight: theme.spacing.md,
    },
    contactInfo: {
        flex: 1,
    },
    contactLabel: {
        fontSize: theme.fontSize.sm,
        color: theme.colors.neutral.gray,
        marginBottom: 2,
    },
    contactValue: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.black,
        fontWeight: theme.fontWeight.medium,
    },
    // faqCard: {
    //     marginHorizontal: theme.spacing.lg,
    //     marginBottom: theme.spacing.lg,
    //     backgroundColor: theme.colors.neutral.white,
    //     borderRadius: theme.borderRadius.large,
    //     padding: theme.spacing.lg,
    //     ...Platform.select({
    //         ios: {
    //             shadowColor: "rgba(0, 0, 0, 0.1)",
    //             shadowOffset: { width: 0, height: 2 },
    //             shadowOpacity: 0.2,
    //             shadowRadius: 4,
    //         },
    //         android: {
    //             elevation: 3,
    //         },
    //     }),
    // },
    // faqTitle: {
    //     fontSize: theme.fontSize.lg,
    //     fontWeight: theme.fontWeight.bold,
    //     color: theme.colors.neutral.black,
    //     marginBottom: theme.spacing.lg,
    //     paddingLeft: theme.spacing.xs,
    //     borderLeftWidth: 4,
    //     borderLeftColor: theme.colors.primary.default,
    // },
    // faqItem: {
    //     flexDirection: "row",
    //     alignItems: "center",
    //     paddingVertical: theme.spacing.md,
    //     borderBottomWidth: 1,
    //     borderBottomColor: "rgba(0, 0, 0, 0.05)",
    // },
    // faqIconContainer: {
    //     width: 24,
    //     height: 24,
    //     borderRadius: 12,
    //     backgroundColor: "rgba(91, 142, 244, 0.1)",
    //     alignItems: "center",
    //     justifyContent: "center",
    //     marginRight: theme.spacing.md,
    // },
    // faqText: {
    //     fontSize: theme.fontSize.md,
    //     color: theme.colors.neutral.darkGray,
    //     flex: 1,
    // },
    formCard: {
        marginHorizontal: theme.spacing.lg,
        marginBottom: theme.spacing.lg,
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.large,
        padding: theme.spacing.lg,
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.1)",
                shadowOffset: { width: 0, height: 2 },
                shadowOpacity: 0.2,
                shadowRadius: 4,
            },
            android: {
                elevation: 3,
            },
        }),
    },
    formTitle: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.bold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.lg,
        paddingLeft: theme.spacing.xs,
        borderLeftWidth: 4,
        borderLeftColor: theme.colors.primary.default,
    },
    inputContainer: {
        marginBottom: theme.spacing.md,
    },
    inputLabel: {
        fontSize: theme.fontSize.sm,
        fontWeight: theme.fontWeight.medium,
        color: theme.colors.neutral.darkGray,
        marginBottom: theme.spacing.xs,
    },
    input: {
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.md,
        fontSize: theme.fontSize.md,
        backgroundColor: "#FFF",
    },
    textArea: {
        borderWidth: 1,
        borderColor: theme.colors.neutral.lightGray,
        borderRadius: theme.borderRadius.medium,
        paddingHorizontal: theme.spacing.md,
        paddingVertical: theme.spacing.md,
        fontSize: theme.fontSize.md,
        backgroundColor: "#FFF",
        height: 120,
    },
    inputError: {
        borderColor: theme.colors.secondary.red.default,
    },
    errorText: {
        color: theme.colors.secondary.red.default,
        fontSize: theme.fontSize.sm,
        marginTop: 4,
    },
    submitButton: {
        borderRadius: theme.borderRadius.large,
        overflow: "hidden",
        marginTop: theme.spacing.md,
        ...Platform.select({
            ios: {
                shadowColor: theme.colors.primary.default,
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.3,
                shadowRadius: 5,
            },
            android: {
                elevation: 4,
            },
        }),
    },
    submitButtonGradient: {
        paddingVertical: theme.spacing.md,
        alignItems: "center",
        justifyContent: "center",
        flexDirection: "row",
    },
    submitButtonText: {
        color: "#FFF",
        fontSize: theme.fontSize.md,
        fontWeight: theme.fontWeight.semiBold,
    },
})

